<template>
  <a-menu
    :class="dataSource.options.class"
    :theme="dataSource.options.theme || 'light'"
    :mode="dataSource.options.mode || 'inline'"
    :defaultSelectedKeys="[$route.path]"
    :defaultOpenKeys="[$route.meta.subKey]"
  >
    <template v-for="group in dataSource.groups" >
      <menu-item
        :group="group"
        :dataProps="dataSource.props"
        v-if="handleOnReceiveField(group, MenuType.MENU)"
        :key="group[getProp().url]"
      ></menu-item>
      <sub-menu
        :group="group"
        :dataProps="dataSource.props"
        v-else-if="group[getProp().children] && handleOnReceiveField(group, MenuType.DIR)"
        :key="group[getProp().url]"
      ></sub-menu>
    </template>
  </a-menu>
</template>

<script>
import { Menu } from "ant-design-vue";

import MenuItem from "./MenuItem";
import SubMenu from "./SubMenu";

import { MenuType } from "assets/js/Constant";
import {getProps} from "assets/js/Basic"

export default {
  name: "UIMenu",
  props: {
    dataSource: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    AMenu: Menu,
    MenuItem: MenuItem,
    SubMenu: SubMenu,
  },
  data() {
    return {
      MenuType,
    };
  },
  methods: {
    handleOnReceiveField(group, menuType) {
      const props = getProps(this.dataSource.props);
      return group[props.type] == menuType;
    },
    getProp() {
      return getProps(this.dataSource.props);
    }
  },
};
</script>

<style lang="less" scoped>
</style>